<template>
	<u-popup :show="value">
		<view class="style-options">
			<view class="header-area">
				<view class="msg">
					<image :src="detail.cover"></image>
					<view class="price">¥ {{ detail.price }}</view>
					<image class="close" src="@/static/goodDetail/close.png" @click="handleClose"></image>
				</view>
				<view class="design">
					<view class="title">款式颜色</view>
					<view class="box">
						<view class="chunk" v-for="(item, index) in styleList" :key="index"
							:class="{ 'active': index == activeIndex }" @click="handleChange(item, index)">
							{{ item.name }}</view>
					</view>
				</view>
			</view>
			<view class="footer-area">
				<view class="control-area">
					<view class="title">数量</view>
					<NumCount v-model="num"></NumCount>
				</view>
			</view>
			<view class="buy-now" @click="toPay">立即购买</view>
		</view>
	</u-popup>
</template>
<script setup>
import uPopup from "@/uni_modules/uview-plus/components/u-popup/u-popup.vue";
import NumCount from "@/components/NumCount.vue";
import { reactive, toRefs, defineEmits, computed } from 'vue'
import { GoodsStore } from '@/stores/goods'
const store = GoodsStore()
const emit = defineEmits(['change', 'update:modelValue']);
const props = defineProps({
	modelValue: Boolean,
	detail: Object,
	styleList: Array
})
const value = computed({
	get: () => props.modelValue,
	set: (val) => {
		emit('update:modelValue', val)
	}
})
const state = reactive({
	activeIndex: 0,
	num: 1,
})
function handleClose () {
	emit('update:modelValue', false)
}
function handleChange (item, index) {
	state.activeIndex = index
	emit('change', item)
}
function toPay () {
	store.setGoodsDetail(props.detail)
	store.setGoodsStyle(props.styleList[state.activeIndex])
	store.setGoodsNum(state.num)
	uni.navigateTo({
		url: '/pages/order/confirmOrder'
	})
}
const {
	activeIndex,
	num
} = toRefs(state)
</script>

<style lang="scss" scoped>
.style-options {
	width: 750rpx;
	height: 918rpx;
	background: #FFFFFF;
	border-radius: 22rpx 22rpx 0rpx 0rpx;

	.header-area {
		padding: 36rpx;
		border: 1rpx solid #DEDEDE;

		.msg {
			position: relative;
			display: flex;
			margin-bottom: 40rpx;

			image {
				width: 155rpx;
				height: 155rpx;
				border-radius: 20rpx;
			}

			.price {
				margin-left: 30rpx;
				font-weight: 800;
				font-size: 36rpx;
				color: #FF0000;
			}

			.close {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}

		.design {
			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}

			.box {
				.chunk {
					margin-top: 28rpx;
					text-align: center;
					width: 398rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 55rpx 55rpx 55rpx 55rpx;
					background: #F5F5F5;
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
					border: 1rpx solid #F5F5F5;
				}

				.active {
					border: 1rpx solid #58DBCF;
					background: #E8FFFD;
				}
			}
		}

	}

	.footer-area {
		padding: 36rpx;

		.control-area {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}


		}
	}

	.buy-now {
		width: 678rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #58DBCF;
		border-radius: 500rpx;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		margin: 100rpx 36rpx 50rpx;
	}
}
</style>